<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="用户昵称">
                <a-input placeholder="请输入用户昵称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="手机号">
                <a-input placeholder="请输入手机号" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="">
                <a-button style="margin-right: 8px" @click="resetQueryParams">重置</a-button>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button :loading="exporting" @click="exportRO" type="primary" style="margin-left: 9px">导出Excel</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">

      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <div slot="name" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.avatar_url" alt="" />
            </div>
            <div class="info">
              <span>{{ record.nickname }}</span>
            </div>
          </div>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { rechargeList, rechargeDel, rechargeAdd, rechargeEdit, rechargeSetting, rechargeOrder, exprechargeOrder } from '@/api/marketing'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '会员信息',
    scopedSlots: {
      customRender: 'name',
    },
  },
  {
    title: '支付金额(元)',
    dataIndex: 'pay_price',
  },
  {
    title: '赠送金额(元)',
    dataIndex: 'send_price',
  },
  {
    title: '订单号',
    dataIndex: 'order_no',
  },
  {
    title: '时间',
    dataIndex: 'created_at',
  }
]

export default {
  name: 'RechargeOrder',
  components: {
    STable,
  },
  data() {
    return {
      exporting: false,
      // 表头
      columns,
      modalLoading: false,
      // 查询条件参数
      queryParam: {
        name: null,
        phone: null,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return rechargeOrder(parameter)
          .then((res) => {
            console.log('rechargeOrder', res)
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
    }
  },
  methods: {
    resetQueryParams() {
      Object.assign(this.queryParam, {
        name: null,
        phone: null,
      })
      this.$refs.table.refresh(true)
    },
    exportRO(e) {
      this.exporting = true;
      let parameter = {...this.queryParam};
      Object.assign(parameter, {
        pageNo: 1,
        pageSize: 100000,
        _filename: '充值记录.xlsx',
        export: 1
      })
      exprechargeOrder(parameter).then(()=>{
        this.exporting = false;
      });
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
